<template>
    <view class="bg-[#f8f8f8] min-h-[100vh]" :style="themeColor()">
        <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" height="auto" :up="{ empty: { use: true, tip: '暂无数据' } }" @up="getList">
            <view v-if="list.length" class="pb-[var(--top-m)] sidebar-margin">
                <view class="pt-[var(--top-m)]" v-if="list.length">
                    <view class="flex items-center sidebar-margin mb-[var(--top-m)] card-template" v-for="(item,index) in list" :key="index">
                        <image class="w-[90rpx] h-[90rpx] mr-[20rpx] rounded-full" v-if="item.headimg" :src="img(item.headimg)" mode="aspectFill" />
                        <image class="w-[90rpx] h-[90rpx] mr-[20rpx] rounded-full" v-else :src="img('addon/shop_fenxiao/index/head.png')" mode="aspectFill" />
                        <view class="flex flex-col">
                            <view class="flex items-center">
                                <view class="mr-[10rpx] flex items-center">
                                    <text class="text-[30rpx] font-500">{{ item.username }}</text>
                                    <text class="bg-primary-light !text-[var(--primary-color)] !text-[22rpx] px-[10rpx] h-[36rpx] ml-[10rpx] tag-item">{{ item.level_name }}</text>
                                </view>
                            </view>
                            <text class="text-[var(--text-color-light6)] text-[24rpx] mt-[16rpx]">消费业绩 {{ item.total_team_consume || '0.00' }}</text>
                            <text class="text-[var(--text-color-light6)] text-[24rpx] mt-[16rpx]">加入时间: {{ item.create_time }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
        <loading-page :loading="loading" />
    </view>
</template>

<script setup lang="ts">
import { img } from '@/utils/common';
import { ref } from 'vue'
import { getMemberTeamList } from "@/app/api/member";
import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app'
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)

const list = ref<any>([]);
const loading = ref(true);
const getList = (mescroll: any) => {
    loading.value = true;
    let data: object = {
        page: mescroll.num,
        limit: mescroll.size,
    };
    getMemberTeamList(data).then((res: any) => {
        let newArr = (res.data.data as Array<Object>);
        if (mescroll.num == 1) {
            list.value = []; //如果是第一页需手动制空列表
        }
        list.value = list.value.concat(newArr);
        loading.value = false;
        mescroll.endSuccess(list.value.length);
    }).catch(() => {
        loading.value = false;
        mescroll.endErr();
    })
}
</script>

<style lang="scss" scoped>
</style>
